<script>
import adoptProgress from './components/adoptProgress.vue';
import img1 from "/src/assets/avatar.jpg"
import icon from "/src/assets/icon.png"
import axios from 'axios';

export default {
  
  mounted() {
    const userData = JSON.parse(sessionStorage.getItem('token'));
    const hasNewMess = JSON.parse(sessionStorage.getItem('hasNewMess'));

    this.hasNewMessages = hasNewMess !== null ? hasNewMess : true;
    this.token = userData.token;
    this.userID = userData.userID;
    axios.defaults.headers.common['Authorization'] = `${this.token}`;

    const response_1 = axios.get('http://localhost:8080/users/'+this.userID);
      response_1.then((result) => {
          this.avatar = result.data.ProfilePhoto;
      }).catch((error) => {
          console.log(error);
      });

    // 从后端获取消息数据
    axios.get(`http://localhost:8080/adopt/application/getUseradoptprocesslist/` + this.userID)
      .then((response) => {
        const data = response.data.data;
        console.log("获取领养进程返回的消息是：");
        console.log(response.data);

        data.forEach(item => {
      console.log('消息类型 (Type):', item.Type);  // 打印每条消息的 Type 字段
    });

    this.messList = data.map(item => ({
          adoptID: item.adoptID || null,
          applyuserID: item.applyuserID || null,
          applyuName: item.applyuName || '未知用户',
          applyprofilePhoto: item.applyprofilePhoto || img1,
          promoteuserID: item.promoteuserID || null,
          promoteuName: item.promoteuName || '未知用户',
          promoteprofilePhoto: item.promoteprofilePhoto || img1,
          passageID: item.passageID || null,
          process: item.process || 0,
        }));

        console.log("处理后的 messList:", this.messList); // 打印 messList
        // 判断是否有新消息
        if (data.length > 0) {
          sessionStorage.setItem('hasNewMess', JSON.stringify(false));
        }
      })
      .catch((error) => {
        console.error("获取消息数据出错:", error);
      });
  },


  components:{adoptProgress},
  data(){
    return {
      img1,
      icon,
      avatar: null,
      messList: [], // 初始化消息列表
    };
  },
  methods:{
    // 头像点击
    avaClick(){
      this.$router.push({path:'/UserPage',query:{id:this.userID}})
      console.log("avatar clicked!")
    },
    // 搜索点击
    searchClick(){
      this.$router.push({path:'/SearchPage/general'})
    },
    discoverClick(){
      this.$router.push({path:'/MainPage'})
      this.headerComponent="Menu_1";
    },
    adoptClick(){
      this.$router.push({path:'/AdoptPageMessage'})
    },
    msgClick(){
      this.$router.push({path:'/Message/like'})
    },
    postClick(){
      this.$router.push({path:'/PostPage'})
    },
    recommendClick(){
      this.$router.push({path:'/AdoptPage'})
    }
  }
}
</script>

<template>
  <div class="layout" style="height:100vh;">
    <el-container >
      <el-header class="header" >
        <el-row
            justify="space-between"
            style="padding-top: 10px;padding-bottom: 10px">

          <!--头像-->
          <img :src="icon"
               style="width:55px;height:55px;"
               alt=""/>

          <!-- <div class="InputContainer">
            <input type="text" name="text" class="input" id="input" placeholder="发现更多……" autocomplete="off">
            <button class="searchBut" @click="searchClick"><svg viewBox="0 0 530 530" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
            </button>
          </div> -->

          <el-avatar
              :class="'avatar'"
              :src="this.avatar"
              :fit="'cover'"
              :shape="'circle'"
              :size="55"
              @click="avaClick"
          />
        </el-row>
      </el-header>

      <el-container>
        <el-aside>
          <el-menu
              active-text-color="#FFD466"
              default-active="2"
          >
            <el-menu-item class="aside" index="1" @click="discoverClick">
              <el-icon :size="25" style="margin-right:10px;"><House /></el-icon>
              <span>发现</span>
            </el-menu-item>
            <el-menu-item class="aside" index="2" @click="adoptClick">
              <el-icon :size="25" style="margin-right:10px;"><Star /></el-icon>
              <span>领养</span>
            </el-menu-item>
            <el-menu-item class="aside" index="3" @click="msgClick">
              <el-icon :size="25" style="margin-right:10px;"><Message /></el-icon>
              <span>消息</span>
            </el-menu-item>
            <el-menu-item class="aside" index="4" @click="postClick">
              <el-icon :size="25" style="margin-right:10px;"><CirclePlus /></el-icon>
              <span>发布</span>
            </el-menu-item>
          </el-menu>
        </el-aside>


        <el-container>
          <el-header style="height:40px;">
            <el-menu
                default-active="2"
                style="display: flex;justify-content: center;height:40px;"
                active-text-color="#FFD466"
                mode="horizontal"
            >
              <el-menu-item class="chose" index="1" style="margin-right:15px" @click="recommendClick">推荐领养</el-menu-item>
              <el-menu-item class="chose" index="2" @click="adoptClick">你的领养进程</el-menu-item>
            </el-menu>
            <!--                  <Menu_1/>-->
          </el-header>

          <el-main class="mainPage">
            <el-row style="justify-content:start; margin-left:10px; gap:10px;">
              <!-- 动态渲染 adoptProgress 组件 -->
              <adoptProgress
                v-for="item in messList"
                :key="item.adoptID"
                :applyuName="item.applyuName"
                :applyprofilePhoto="item.applyprofilePhoto"
                :promoteuName="item.promoteuName"
                :promoteprofilePhoto="item.promoteprofilePhoto"
                :passageID="item.passageID"
                :adoptID="item.adoptID"
                :process="item.process"
                :applyuserID="item.applyuserID"
              />
            </el-row>
          </el-main>
        </el-container>
      </el-container>


    </el-container>
  </div>
</template>


<style scoped>
.el-avatar{
  cursor: pointer;
}
.el-menu{
  border:0!important;
}
/*header样式*/
.header{
  /*background-color:black;*/
  height:60px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  margin-bottom:20px;
}

/*搜索框样式*/
.InputContainer {
  height: 40px;
  margin-top:5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding-left: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}
.input {
  width: 200px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  caret-color: black;
}
.searchIcon {
  margin-top:3px;
  width: 12px;
}
.searchBut {
  padding: 0 15px 0 12px;
  border: none;
  background-color: transparent;
  height: 40px;
  cursor: pointer;
  transition-duration: .3s;
}
.searchBut:hover {
  background-color: #FFE9B2;
  transition-duration: .3s;
}

/*aside*/
.el-aside{
  margin-left: 10px;
  width:180px;
  height:calc(100vh - 70px);
  padding-top:23vh;
}

.aside{
  height:65px;
  font-size:18px;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.aside:hover) {
  background-color: #FFE9B2;
}

/*menu*/
.el-menu{
  border:0!important;
}

.chose{
  font-size:18px;
  font-weight:bold;
}
::v-deep(.chose:hover){
  background-color: #FFE9B2!important;
  color:#FFD466!important;
}
.el-menu-item.is-active{
  background-color: white!important;
  color:#FFD466!important;
}



/*主页面*/
.mainPage{
  height:50vh;
}

</style>


